<template>
	<view class="desc-box">
		<CuHeaderPages :titleName="titleName" />
		
		<view class="content">
			<image mode="widthFix" class="banner-img" src="/static/image/icon/home1.png" alt="" />
			<view class="out-box" >
				<view class="in-out">
					<view class="top-intro">
						<view class="text-center margin-top-lg text-cu-red text-xl text-bold">
							评测介绍
						</view>
						<view class="flex justify-around margin-top-lg">
							<view class="">
								<view class="text-center">
									<text class="text-cu-red text-xxl text-bold">8</text>
									<text class="margin-left-xs">分钟</text>
								</view>
								<view class="text-grey6 text-df margin-top-xs">
									高效测评
								</view>
							</view>
							<view class="">
								<view class="text-center">
									<text class="text-cu-red text-xxl text-bold">40</text>
									<text class="margin-left-xs">题</text>
								</view>
								<view class="text-grey6 text-df margin-top-xs">
									深度解析
								</view>
							</view>
							
						</view>
					</view>	
					<view class="bottom-intro padding">
						<view class="text-center margin-top-xs margin-bottom text-bold text-df">
							评测须知
						</view>
						<view class="text-black margin-top-xs text-df">
							1.测评结果需严格保密，仅限专业人员或授权人员查阅。
							明确告知参与者数据用途（如科研、咨询、评估等），避免滥用。
						</view>
						<view class="text-black margin-top-xs text-df">
							2.选择经过信效度检验的标准化量表（如SCL-90、EPQ、MMPI等），避免随意编题。
							题目需清晰、无歧义，避免引导性或暗示性语言。
						</view>
						<view class="text-black margin-top-xs text-df">
							3.测评前需获得参与者知情同意，说明目的、时长及潜在影响。
							避免涉及敏感话题（如创伤经历）或强制作答，必要时提供跳过选项。
						</view>
						<view class="text-grey margin-top-xs text-sm">
							温馨提示：放松作答"请根据第一反应回答，无需过度思考，答案无对错之分。"
							"您的真实回答对结果至关重要，无需迎合社会期待。"
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="cu-bar bg-white tabbar border shop foot">
		    <button class="action" open-type="contact">
		        <view class="cuIcon-share text-green">
		        </view> 分享
		    </button>
		    <view class="action">
		        <view class="cuIcon-text">
	<!-- 	            <view class="cu-tag badge">12</view> -->
		        </view>
		        历史
		    </view>
		    <view class="btn-group">

		        <button @click="openCe" class="cu-btn bg-orange round shadow-blur block lg">立即测试</button>
		    </view>
		</view>
	</view>
</template>

<script setup>
	import {onReady,onLoad,onShow} from '@dcloudio/uni-app'
	import CuHeaderPages from  '@/components/pages/cu-header-unit.vue'
	import { ref } from 'vue';
	
	let titleName= ref("特则理论类测试")
	
	//打开测试
	function openCe(){
		uni.navigateTo({
			url:"/pages/home/test-detail/content-list-page"
		})
		
	}

</script>

<style lang="scss" scoped>
	
	.desc-box{
		position: relative;
		.text-cu-red{
			color: #ff1c69;
		}

		.content{
									
			.banner-img {
				width: 100%;
			}	
			.out-box{
				position: relative;
				.in-out{
					position: absolute;
					
					top: -150rpx;
					left: 0;
					width: 100%;
					.top-intro{
						margin:0 30rpx ;
						height: 300rpx;
						border: 2rpx solid #fff;
						border-radius: 24rpx;
						background: rgba(255, 255, 255, 0.7); /* 半透明背景 */
					}
					.bottom-intro{
						margin:0 30rpx ;
						margin-top: 30rpx;
						margin-bottom: 120rpx;
						border: 2rpx solid #fff;
						border-radius: 16rpx;
						background:#fff4f7; /* 半透明背景 */
						line-height: 44rpx;
						
					}
				}
				
			}

			
		}


		.btn-group{
			.cu-btn{
				background: #ff1c69;
				width: 80%;
			}
		}
		
		
		
	}       
</style>
